<template>
  <div>
    <!--图片轮播区域-->
    <el-row type="flex" class="AD-content" justify="center">
      <el-col :span="14">
        <carousel-a-d></carousel-a-d>
        <!--<swipe-a-d/>-->
      </el-col>
      <!--<el-col :span="4">-->
      <!--  <public-btn/>-->
      <!--</el-col>-->
    </el-row>
    <!--主题内容区域-->
    <el-row :gutter="20" type="flex" class="row-content" justify="center">
      <el-col :span="10">
        <!--文章展示区域-->
        <article-display @loadmore='loadmore'></article-display>
      </el-col>
      <el-col :span="4">
        <!--小广告-->
        <carousel-a-d-small></carousel-a-d-small>
        <!--资讯-->
        <!--<real-time-info :monthHot="getMonthHot()"></real-time-info>-->
        <real-time-info></real-time-info>
        <!--推荐话题-->
        <recommended-topics></recommended-topics>
        <!--推荐用户-->
        <recommended-users></recommended-users>
        <!--本月热门-->
        <monthly-hot-list></monthly-hot-list>
      </el-col>
    </el-row>
    <!-- 页脚区域 -->
    <foot></foot>
  </div>
</template>

<script>
// @ is an alias to /src
import carouselAD from '@/components/AD/carouselAD'
import carouselADSmall from '@/components/AD/carouselADSmall'
import articleDisplay from '@/components/articleDisplay'
import realTimeInfo from '@/components/realTimeInfo'
import recommendedTopics from '@/components/recommendedTopics'
import recommendedUsers from '@/components/recommendedUsers'
import monthlyHotList from '@/components/monthlyHotList'
import publicBtn from '@/components/publicBtn'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import foot from '@/components/footer.vue'

export default {
  name: 'Home',
  // eslint-disable-next-line vue/no-unused-components
  components: { carouselAD, carouselADSmall, articleDisplay, realTimeInfo, recommendedTopics, recommendedUsers, monthlyHotList, publicBtn, foot },
  data: () => ({
    user: {},
    ashow: {}, // 列表展示行为记录表
    timer: null, // 定时函数,
    articleListParams: {
      index: 0,
      // max_behot_time: 20000000000000,
      // min_behot_time: 0,
      page_size: 6,
      page_num: 1,
      tag: '__all__'
    }
  }),
  created () {
    // 路由传递过来的user信息，要将其传递给父组件
    this.loadarticle()
    this.user = this.$route.params
    setTimeout(() => {
      this.show(this.articleList) // 你的异步请求接口
    }, 1000) // 延迟0.1秒
    // 每隔5秒提交一次数据
    this.timer = setInterval(() => {
      var result = this.saveShowBehavior(this.ashow)
      // console.log(result)
      if (result) {
        result.then(d => {
          // 标记已经处理完成
          const ids = d.data
          for (let i = 0; i < ids.length; i++) {
            this.ashow[ids[i].id] = false
          }
        })
      }
    }, 5000)
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    ...mapMutations('HomePage', { setArticleActionList: 'setArticleActionList', InitArticleList: 'InitArticleList' }),
    ...mapActions('HomePage', { load: 'load' }),
    // 上拉加载更多(更多)
    async loadmore () {
      // console.log(111)
      // 拿到请求地址
      var url = this.getLoadUrl(2)
      var params = {}
      params.url = url
      this.articleListParams.page_num += 1
      params.parameter = this.articleListParams
      console.log(params)
      await this.load(params)
    },
    // 下来刷新数据(最新)
    async loadnew () {
      // 拿到请求地址
      var url = this.getLoadUrl(0)
      var params = {}
      params.url = url
      params.parameter = this.articleListParams
      // console.log(params)
      await this.load(params)
    },
    // 正常加载数据
    async loadarticle () {
      // 拿到请求地址
      var url = this.getLoadUrl(1)
      var params = {}
      params.url = url
      params.parameter = this.articleListParams
      // console.log(params)
      await this.load(params)
    },
    // 1:默认加载， 0:加载最新   2: 加载更多
    getLoadUrl (dir) {
      let url = this.$config.urls.get('load')
      if (dir === 0) {
        url = this.$config.urls.get('loadnew')
      } else if (dir === 2) {
        url = this.$config.urls.get('loadmore')
      }
      return url
    },
    // 保存展现行为数据
    saveShowBehavior: function (params) {
      const param = []
      // console.log('params')
      // console.log(params)
      for (const k in params) {
        if (params[k]) {
          param.push({ id: k })
        }
      }
      // console.log('param')
      // console.log(param)
      if (param.length > 0) {
        const url = this.$config.urls.get('show_behavior')
        return this.$memory
          .getEquipmentId()
          .then(equipmentId => {
            return new Promise((resolve, reject) => {
              this.$http
                .post(url, {
                  equipment_id: equipmentId,
                  article_ids: param
                })
                .then(d => {
                  d.data = param
                  // console.log(param)
                  resolve(d)
                })
                .catch(e => {
                  reject(e)
                })
            })
          })
          .catch(e => {
            return new Promise((resolve, reject) => {
              reject(e)
            })
          })
      }
    },
    // 列表项在可见区域展示后的事件处理
    show: function (articles) {
      if (articles.length === 0) {
        console.log('没有数据')
      }
      for (let i = 0; i < articles.length; i++) {
        if (this.ashow[articles[i].content.article_id] === undefined) {
          this.ashow[articles[i].content.article_id] = true
        }
      }
    }
  },
  computed: {
    ...mapGetters('HomePage', { articleActionList: 'articleActionList', articleList: 'articleList' })
  },
  destroyed () {}
}
</script>

<style lang="less" scoped>
.AD-content {
  margin-top: 40px;
}
.row-content {
  margin-top: 8px;
}
.clearfix {
  text-align: center;
}

.el-button {
  margin: 10px 46px;
}
</style>
